<template>
  <div class="c-p c-bg-sgray c-pb100" v-if="shopInfo && refund">
    <section class="c-pv24 bgTop theme-bg c-ph24">
      <div class="c-bg-white c-br8 c-text-hidden c-pv24 c-ph24">
        <!-- `refundStatus` 1:买家申请中 2:商家同意售后, 3(已被代码重新赋值后占用),4-商家同意退货,5-买家已寄货 -1：用户撤销售后 -2：商家拒绝售后 -3：买家超时未处理 -4：商家自动关闭(发货关闭，已弃用) -5：商家退款失败关闭 -6：退货拒绝退款', -->
        <template v-if="refund.refundStatus == 1">
          <div class="c-fs28 c-lh40 c-fc-xblack c-flex-row c-aligni-center"><i class="iconfont icon-shijian2 theme-fc c-fs32 c-mr12"></i>{{refund.type == 1 ? '请等待商家处理' : '待商家处理退货退款申请'}}</div>
          <div class="c-fs20 c-fc-gray c-mt12 c-lh28" v-if="refund.automaticTime">还剩<cj-clocker :time="refund.automaticTime * 1000" format="%D天%H小时%M分钟" @on-finish="finishFn()"></cj-clocker></div>
        </template>
        <template v-if="[-1, -3, -4, 2].includes(refund.refundStatus)">
          <div class="c-fs28 c-lh40 c-fc-xblack c-flex-row c-aligni-center"><i class="iconfont theme-fc c-fs28 c-mr12" :class="refund.refundStatus == 2 ? 'icon-chenggong' : 'icon-shibai'"></i>{{refund.refundStatus == 2 ? (refund.type == 1 ? '退款' : '退货退款') + '成功' : '退款关闭'}}</div>
          <div class="c-fs20 c-fc-gray c-mt12">{{refund.finishAt}}</div>
        </template>
        <template v-if="refund.refundStatus == -2 || refund.refundStatus == -6">
          <div class="c-fs28 c-lh40 c-fc-xblack c-flex-row c-aligni-center"><i class="iconfont icon-tubiao-1 theme-fc c-fs32 c-mr12"></i>商家拒绝{{refund.type == 1 ? '售后' : '退货退款'}}</div>
          <template v-if="(shopInfo.fromApp == 10) && (refund.automaticTime < nowTime)">
            <div class="c-fs20 c-fc-gray c-lh28">超时未处理，您可和商家再次协商处理退款然后到微信-视频号-订单中操作退款事项</div>
          </template>
          <template v-else>
            <div class="c-fs20 c-fc-gray c-mt12 c-lh28" v-if="refund.automaticTime && refund.type == 1">您需在<cj-clocker :time="refund.automaticTime * 1000" format="%D天%H小时%M分钟" @on-finish="finishFn()"></cj-clocker>内响应，否则本次申请将自动撤销</div>
            <div class="c-fs20 c-fc-gray c-lh28" v-if="refund.type == 1">您可以修改申请后再次发起，商家会重新处理</div>
          </template>
        </template>
        <template v-else-if="refund.refundStatus == 4">
          <div class="c-fs28 c-lh40 c-fc-xblack c-flex-row c-aligni-center"><i class="iconfont icon-tubiao-1 theme-fc c-fs32 c-mr12"></i>待买家退货</div>
          <div class="c-fs20 c-fc-gray c-mt12 c-lh28" v-if="refund.automaticTime">请在<cj-clocker :time="refund.automaticTime * 1000" format="%D天%H小时%M分钟" @on-finish="finishFn()"></cj-clocker>内寄出所退商品，超时将默认放弃退货</div>
        </template>
        <template v-else-if="refund.refundStatus == 5">
          <div class="c-fs28 c-lh40 c-fc-xblack c-flex-row c-aligni-center"><i class="iconfont icon-tubiao-1 theme-fc c-fs32 c-mr12"></i>待商家收货退款</div>
          <div class="c-fs20 c-fc-gray c-mt12 c-lh28" v-if="refund.automaticTime">还剩<cj-clocker :time="refund.automaticTime * 1000" format="%D天%H小时%M分钟" @on-finish="finishFn()"></cj-clocker>，超时后将自动退款给买家</div>
        </template>
      </div>
    </section>
    <section class="c-mt12 c-bg-white c-ph24 c-pv24 c-fs24 c-fc-xblack" v-if="refund.refundStatus == -6 || refund.refundStatus == -2 || refund.refundStatus == 2 || refund.refundStatus == 1 || refund.refundStatus == 4 || refund.refundStatus == 5">
      <template v-if="refund.refundStatus == -6 || refund.refundStatus == -2 || refund.refundStatus == 1">
        <p class="c-fs28 c-fc-xblack">{{refund.refundStatus == -6 || refund.refundStatus == -2 ? '拒绝理由' : '您已成功发起' + (refund.type == 1 ? '退款' : '退货退款') + '申请，请耐心等待商家处理'}}</p>
        <p class="c-fs20 c-fc-gray c-mt20">
          {{refund.refundStatus == 1 ? '' : refund.rejectReason}}
          <template v-if="refund.refundStatus == 1 && refund.type == 1">
            商家同意或者超时未处理，系统将自动退款给您,如果商家拒绝，您可以修改退款申请后再次发起
          </template>
          <template v-if="refund.refundStatus == 1 && refund.type == 2">
            如果商家同意或超时未处理，你可根据系统提示退货地址寄出退货,如果商家拒绝，您可与商家协商后重新发起售后
          </template>
        </p>
      </template>
      <template v-if="refund.refundStatus == 5">
        <p class="c-fs28 c-fc-xblack">您已成功寄出退货，请耐心等待商家收货</p>
        <p class="c-fs20 c-fc-gray c-mt20">
          如果商家收货后同意退款或超时，将退款到您付款的账号
          如果商家收到货后拒绝退款，您可与商家协商一致后退款
        </p>
      </template>
      <template v-if="refund.refundStatus == 2">
        <div class="c-flex-row c-aligni-center">
          <span class="c-flex-grow1 c-w0 c-fs28 c-fc-xblack">退款金额</span><span class="theme-fc c-fs28">{{'￥' | iosPriceFilter}}{{refund.refundMoney}}</span>
        </div>
      </template>
      <template v-if="refund.refundStatus == 4">
        <div class="c-p">
          <div class="c-fs24 c-fc-xblack"><span class="c-mr20 c-inlineblack">收货人：</span><span>{{refund.name}}</span></div>
          <div class="c-fs24 c-fc-xblack c-mt24"><span class="c-mr20 c-inlineblack">联系电话：</span><span>{{refund.mobile}}</span></div>
          <div class="c-fs24 c-fc-xblack c-mt24"><span class="c-mr20 c-inlineblack">收货地址：</span><span>{{refund.province}}{{refund.city}}{{refund.area}}{{refund.address}}</span></div>
          <div class="c-ph12 c-pv12 c-fs24 c-fc-white theme-bg c-br8 c-pa c-p-r0 c-p-t0" v-if="shopInfo.fromApp != 10" @click="sendAfterSaleGood">寄出</div>
        </div>
      </template>
    </section>
    <section class="c-mt12 c-bg-white c-flex-row c-aligni-center c-ph24 c-pv24" @click="clickRefundLog">
      <span class="c-flex-grow1 c-w0 c-fs28 c-fc-xblack">协商记录</span><i class="iconfont c-fs20 c-fc-sgray c-pl16">&#xe60e;</i>
    </section>
    <section class="c-mt12 c-bg-white c-ph24 c-pt24">
      <p class="c-fs28 c-fc-xblack">售后信息</p>
      <div class="c-flex-row c-pt24 c-pb10" @click="clickGoShop(shopInfo.mgId)">
        <div class="c-ww160 c-hh160 c-text-hidden c-br10">
          <img :src="$addXossFilter(shopInfo.avatar, require('@/assets/defult270.png'))" class="c-w100 c-h c-br10 imgCloseBig c-object-fit-cover" />
        </div>
        <div class="c-flex-row c-justify-start c-flex-grow1 c-w0 c-pl20">
          <div class="c-flex-column c-justify-start c-flex-grow1 c-w0">
            <div class="c-fs24 c-text-ellipsis1 c-lh34 c-mb20">{{shopInfo.name}}</div>
            <collapse :default-height="52">
              <div class="c-fs20 c-fc-gray" v-if="shopInfo.subSpecs">规格：{{shopInfo.subSpecs}}</div>
            </collapse>
          </div>
          <div class="c-flex-column c-justify-start c-aligni-end">
            <span class="c-fs24 c-fc-xblack">{{'￥' | iosPriceFilter}}{{shopInfo.price}}</span>
            <span class="c-fs20 c-fc-gray c-mt20">x {{shopInfo.quantity}}</span>
          </div>
        </div>
      </div>
      <div class="c-fs24 c-fc-xblack c-mt24"><span class="c-ww160 c-mr20 c-inlineblack">退款金额：</span><span>{{'￥' | iosPriceFilter}}{{refund.refundMoney}} {{refund.refundCoinNum ? '(' + refund.refundCoinNum + '币)' : ''}}</span></div>
      <div class="c-fs24 c-fc-xblack c-mt24"><span class="c-ww160 c-mr20 c-inlineblack">售后类型：</span><span>{{refund.type == 1 ? '退款' : '退货退款'}}{{refund.refundReason == 13 ? '（退定金）' : ''}}</span></div>
      <div class="c-fs24 c-fc-xblack c-mt24"><span class="c-ww160 c-mr20 c-inlineblack">申请时间：</span><span>{{refund.applyAt}}</span></div>
      <div class="c-fs24 c-fc-xblack c-mt24 c-flex-row c-aligni-center">
        <span class="c-ww160 c-mr20 c-inlineblack">售后编号：</span>
        <div class="c-flex-row c-aligni-center c-justify-sb c-w0 c-flex-grow1">
          <span>{{refund.refundNo}}</span><div class="c-fs18 c-lh26 c-fc-xblack c-pv6 c-ph18 c-br18 c-bg-f2" @click="copyText(refund.refundNo)">复制</div>
        </div>
      </div>
      <div class="c-fs24 c-fc-xblack c-mt24 c-bd-b1 c-pb24"><span class="c-ww160 c-mr20 c-inlineblack">退款原因：</span><span>{{refund.from == 2 ? '商家主动发起退款' : refundReasonMap[refund.refundReason]}}</span></div>
      <!-- 联系客服 -->
      <custom-service-tmp :position="2"></custom-service-tmp>
    </section>
    <footer class="order-fotter c-bg-white c-hh80 c-flex-row c-justify-end c-ph24 c-pv14" v-if="shopInfo.fromApp != 10 && ((refund.afterStatus == 1 && (refund.refundStatus == 1 || refund.refundStatus == 4)) || (refund.refundStatus == -2 || refund.refundStatus == 1))">
      <div class="c-fs22 c-ww130 c-h c-flex-row c-flex-center c-fc-xblack c-bd1-ccc c-br25 c-ml24" v-if="refund.afterStatus == 1 && (refund.refundStatus == -2 || refund.refundStatus == 1 || refund.refundStatus == 4)" @click="clickCancelRefund">撤销申请</div>
      <div class="c-fs22 c-ww130 c-h c-flex-row c-flex-center theme-fc theme-bd1 c-br25 c-ml24" @click="clickEditApply" v-if="refund.refundStatus == -2 || refund.refundStatus == 1">修改申请</div>
    </footer>
    <div class="c-pf c-p-b0 c-p-l0 c-hh80 c-lh80 c-textAlign-c c-fs24 c-fc-white c-bg-live-orange c-w100 c-fw-b c-pz100" v-if="shopInfo.fromApp == 10">
      处理售后事宜请到微信--视频号---订单那处理
    </div>

    <div v-show="showEditAddressInfo" class="c-pz1002 c-w100 c-h c-pf c-p-l0 c-p-t0 c-flex-row c-flex-center">
      <div class="c-translucent-balck50 c-text-hidden c-pz-1 c-w100 c-h c-pa c-p-l0 c-p-t0" @click="showEditAddressInfo = false;" data-type='cancel'></div>
      <div class="c-ww540 c-bg-white c-flex-column c-pz1 c-br20">
        <div class="c-fs28 c-textAlign-c c-pt50 c-fw-b c-lh c-pb30">寄出退货商品</div>
        <div class="c-ph30 pb50">
          <div class="c-w100 c-fs20 c-lh64 c-br10 c-flex-row c-aligni-center c-mt10">
            <span class="c-ml8 c-fs24">快递单号：</span>
            <input type="text" autofocus="autofocus" v-model="shipNo" :placeholder="'填写快递单号'" class="c-w0 c-flex-grow1 c-text-indent20 c-hh48 c-bd1 c-lh48 c-br10 c-fs24 c-pl12" />
          </div>
          <div class="c-w100 c-fs20 c-lh64 c-br10 c-flex-row c-aligni-center c-mt10 c-p">
            <span class="c-ml8 c-fs24">快递公司：</span>
            <div @click="clickShowShipperList" class="c-w0 c-flex-grow1 c-text-indent20 c-hh48 c-bd1 c-lh48 c-br10 c-fs24 c-pl12" :class="shipName == '' ? 'c-fc-sgray' : ''">{{shipName == '' ? '选择快递公司' : shipName}}</div>
            <div class="iconfont c-fs18 c-fc-sgray c-pa c-p-r10" v-html="showShipperList == false ? '&#xe6a9;' : '&#xe6ab;'"></div>
          </div>
          <div class="c-w100 c-fs20 c-lh64 c-br10 c-flex-row c-aligni-center c-mt10" v-if="showOtherShip">
            <span class="c-ml8 c-fs24">其他快递公司：</span>
            <input type="text" autofocus="autofocus" v-model="otherShipName" :placeholder="'填写其他快递公司名称'" class="c-w0 c-flex-grow1 c-text-indent20 c-hh48 c-bd1 c-lh48 c-br10 c-fs24 c-pl12" />
          </div>
        </div>
        <footer class="c-fs20 c-flex-row c-fs28 c-bd-t1">
          <div @click="cancelShowEditAddressInfo" class="c-hh88 c-flex-row c-flex-center c-flex-grow1 c-w0 c-fc-gray c-bd-r1">取消</div>
          <div @click="editAddressInfo" class="c-hh88 c-flex-row c-flex-center c-flex-grow1 c-w0 theme-fc">确定</div>
        </footer>
      </div>
    </div>

    <!-- 售后理由 -->
    <open-modal :openModal='showShipperList' @closeModal='cancelShowShipperList'>
      <div class="c-br-tl20 c-br-tr20 c-bg-white">
        <div class="c-p c-pb24">
          <div class="c-w100 c-textAlign-c c-fs28 c-pv24 c-fc-sblack">快递公司</div>
          <i class="iconfont c-pa c-p-t24 c-p-r24 c-fc-sgray c-fs20 c-bg-f6 c-ww30 c-hh30 c-brp50 c-flex-row c-flex-center" @click="cancelShowShipperList">&#xe8fd;</i>
          <div class="c-p c-mb12 c-ph24 c-contexty-scroll c-maxh500">
            <div class="c-fc-xblack c-fs24 c-flex-row c-aligni-center c-justify-sb c-pv24 c-bd-b1-mgray" @click="clickShipper(index)" v-for="(item, index) in shipperList" :key="index">
              <span>{{item.name}}</span>
              <span class="iconfont c-fs32 c-fc-sgray" v-show="item.isChecked != 1">&#xe797;</span>
              <span class="iconfont c-fs32 theme-fc" v-show="item.isChecked == 1">&#xe6b1;</span>
            </div>
          </div>
          <div class="theme-bg c-br36 c-flex-row c-aligni-center c-justify-center c-fc-white c-mlr-auto c-fs24 c-lh34 c-ww600 c-hh64 c-mt40" @click="clickShip">确定</div>
        </div>
      </div>
    </open-modal>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
import OpenModal from "@/components/templates/common/openModal.vue";
import collapse from "@/components/templates/common/collapse.vue";
import CustomServiceTmp from '@/components/templates/custService/customServiceTmp.vue';
let gorId = '';
let godId = '';
let limitGetData = 0; // 倒计时请求数据次数
export default {
  name: "orderAfterSales",
  components: {
    OpenModal,
    collapse,
    CustomServiceTmp
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      refund: null, // 退款信息
      shopInfo: null, // 退款商品信息
      refundReasonMap: {
        '1': '订单信息拍错',
        '2': '多拍/拍错/不想要',
        '3': '地址/电话填写有误',
        '4': '没用/少用优惠',
        '5': '发货/物流问题',
        '6': '缺货',
        '7': '拍多了',
        '8': '协商一致退款',
        '9': '其他',
        '11': '商品损坏/与描述不一致',
        '12': '质量问题',
        '13': '未付尾款，申请退定金'
      },
      showEditAddressInfo: false,
      shipNo: '', // 快递单号
      shipName: '', // 快递公司
      shipperList: [], // 快递公司列表
      showShipperList: false,
      shipIndex: -1,
      showOtherShip: false, // 其他快递公司
      otherShipName: '',
      nowTime: '', // 当前时间的时间戳
      isCustServiceOpen: localStorage.getItem("isCustServiceOpen") == 1 ? true : false, // 是否开启小程序客服
    };
  },
  created() {
    utilJs.appShare(this);
  },

  methods: {
    // 点击确认快递公司
    clickShip() {
      if (this.shipIndex != -1) {
        let item = this.shipperList[this.shipIndex];
        this.shipName = item.name;
      }
      if (this.shipperList[this.shipIndex].code == "OTHER") {
        this.showOtherShip = true;
        this.shipName = this.otherShipName || '其他';
      } else {
        this.showOtherShip = false;
      }
      this.showShipperList = false;
    },
    // 切换快递公司
    clickShipper(i) {
      this.shipIndex = i;
      this.shipperList.forEach((item, i) => {
        this.$set(this.shipperList[i], 'isChecked', -1);
      })
      this.$set(this.shipperList[this.shipIndex], 'isChecked', 1);
    },
    // 取消展示快递公司弹窗
    cancelShowShipperList() {
      this.showShipperList = false;
      if (this.shipName == '') {
        this.shipperList.forEach((item, i) => {
          this.$set(this.shipperList[i], 'isChecked', -1);
        })
        this.shipIndex = -1;
      }
    },
    // 点击展示快递公司弹窗
    clickShowShipperList() {
      this.showShipperList = true;
      this.shipperList.forEach((item, i) => {
        if (this.shipName != '' && item.name == this.shipName) {
          this.$set(this.shipperList[i], 'isChecked', 1);
          this.shipIndex = i;
        } else {
          this.$set(this.shipperList[i], 'isChecked', -1);
        }
      })
    },
    // 寄回弹窗关闭
    cancelShowEditAddressInfo() {
      this.showEditAddressInfo = false;
      this.showOtherShip = false;
      this.shipNo = ''; // 快递单号
      this.shipName = ''; // 快递公司
    },
    // 获取快递公司列表
    getShipperList() {
      utilJs.getMethod(
        global.apiurl + "mall/getShipperList", (res) => {
          let shipperList = res;
          shipperList.forEach(item => {
            item.isChecked = -1;
          })
          shipperList.push({name: '其他', code: 'OTHER'})
          this.shipperList = shipperList;
        }
      )
    },
    // 点击寄回弹窗
    sendAfterSaleGood() {
      this.showEditAddressInfo = true;
    },
    // 确认寄回地址
    editAddressInfo() {
      if (this.shipNo == '') {
        this.$showCjToast({
          text: "请填写快递单号！",
          type: "warn",
          time: 1500
        });
        return;
      } else if (this.shipName == '') {
        this.$showCjToast({
          text: "请选择快递公司！",
          type: "warn",
          time: 1500
        });
        return;
      } else if (this.shipperList[this.shipIndex].code == "OTHER" && this.otherShipName == "") {
        this.$showCjToast({
          text: "请填写其他快递公司！",
          type: "warn",
          time: 1500
        });
        return;
      }
      let data = {
        gorId: gorId,
        shipName: this.shipperList[this.shipIndex].code == "OTHER" ? this.otherShipName : this.shipName,
        shipNo: this.shipNo,
      }
      utilJs.postMethod(
        global.apiurl + "mall/sendAfterSaleGood", data, (res) => {
          this.showEditAddressInfo = false;
          this.getRefund();
        }
      )
    },
    // 点击跳转到协商历史
    clickRefundLog() {
      this.$routerGo(this, "push", {
        path: '/mall/mallOrder/orderRefundLog',
        query: ({gorId: gorId})
      })
    },
    // 修改售后申请
    clickEditApply() {
      this.$routerGo(this, "push", {
        path: '/mall/mallOrder/applyRefund',
        query: ({godId: godId, gorId: gorId, type: this.refund.type})
      })
    },
    // 获取售后信息
    getRefund() {
      utilJs.getMethod(
        global.apiurl + "mall/getRefund?godId=" + godId + "&gorId=" + gorId, (res) => {
          this.refund = res && res.refund ? res.refund : null;
          this.shopInfo = res && res.good ? res.good : null;
          if (this.refund && this.refund.type == 2) {
            this.getShipperList();
          }
        }
      )
    },
    // 撤销申请
    cancelRefund() {
      utilJs.postMethod(
        global.apiurl + "mall/cancelRefund", {gorId: gorId}, (res) => {
          this.$showCjToast({
            text: '撤销成功',
            type: 'success'
          });
          this.getRefund(); // 针对修改售后再返回撤销售后没回退页面没刷新
          this.$nextTick(() => {
            this.$router.go(-1);
          })
        }
      )
    },
    // 撤销退款申请
    clickCancelRefund() {
      let that = this;
      that.$cjConfirm({
        title: '提示', //
        titleCenter: true, //标题是否居中
        message: '您将撤销本次申请，如果问题未解决，您还可以再次发起，确定继续吗？',
        messageCenter: true, //内容是否居中
        showMasker: true, //是否显示透明背景
        clickCloseModal: false, //是否点击透明背景关闭弹窗
        showCancelButton: true, //是否显示取消按钮
        cancelButtonText: '取消', //取消按钮文本
        confirmButtonText: '确定', //确认按钮文本
        onConfirm() {
          that.cancelRefund();
        },
      })
    },
    copyText(id) {
      utilJs.copyText(id);
    },
    finishFn() {
      if (limitGetData != 0) return
      limitGetData++;
      let that = this;
      setTimeout(() => {
        that.shopInfo = null;
        that.refund = null;
        that.nowTime = Date.parse(new Date()) / 1000;
        that.getRefund();
      }, 2000);
    },
    clickGoShop(shopNo) {
      this.$routerGo(this, "push", {
        path: "/mall/shopDetail/shopDetail",
        query: { shopNo: shopNo }
      });
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#/?refereeId=" +
        localStorage.getItem("userId");
      utilJs.wechatConfig(shareUrl, "", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      var shareUrl =
        window.location.href.split("#")[0] +
        "#/?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("", "", shareUrl, "");
    }
  },
  activated() {
    limitGetData = 0;
    gorId = this.$route.query.gorId || '';
    godId = this.$route.query.godId || '';
    setDocumentTitle("售后详情");// eslint-disable-line
    this.refund = null;
    this.shopInfo = null;
    this.shopNo = '';
    this.shipName = '';
    this.otherShipName = '';
    this.nowTime = Date.parse(new Date()) / 1000;
    this.getShipperList();
    this.getRefund();
    this.wechatShare();
  },
  deactivated() {
  }
};
</script>


<style scoped>
.order-fotter {
  width: 100%;
  max-width: 16rem;
  border: 1px solid rgba(242, 242, 242, 1);
  box-shadow: 0px -6px 3px 0px rgba(132, 132, 132, 0.03);
  position: fixed;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 0;
}
.bgTop {
  background-image: url('../../../assets/i/orderBg.png');
  height: 100%;
  width: 100%;
  background-position: top center;
  background-repeat: no-repeat;
}
.c-pv14 {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
.pb50 {
  padding-bottom: 1.25rem;
}
</style>
